import React, { memo, useEffect, useState } from 'react';
import { reqBanners } from '../../../../api/find';
import sty from './sty.module.css';
import { Carousel } from 'antd-mobile'
import { getSizeImage } from '../../../../utils';
const Banner = memo(() => {
  const [banners, setBanners] = useState([]);
  useEffect(() => {
    reqBanners().then(res => {
      setBanners(res.banners)
    })
  }, [])
  return <div className={sty.bannerBox}  >
    <Carousel infinite autoplay>
      {banners && banners.map(item => <img key={getSizeImage(item.imageUrl, 300)} src={item.imageUrl} alt="" />)}
    </Carousel>
  </div>
})
export default Banner